import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Link } from 'umi';
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  SettingFilled,
  UploadOutlined,
  BarsOutlined,
  UsergroupAddOutlined,
  ClusterOutlined,
  ContainerOutlined,
  GlobalOutlined
} from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;

const SiderView = ({ home }) => {
  const collapsed = home.collapsed;
  const [title, setTitle] = useState('乌米管理系统');

  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="logo">
        <span>{collapsed ? '' : title}</span>
      </div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          <Link to="/">
            <span>首页</span>
          </Link>
        </Menu.Item>
        <SubMenu key="sub2" icon={<SettingFilled />} title="系统管理">
          <Menu.Item icon={<UserOutlined />} key="5">
            <Link to="/system/user">
              <span>用户管理</span>
            </Link>
          </Menu.Item>
          <Menu.Item icon={<UsergroupAddOutlined />} key="6">
            <Link to="/system/role">
              <span>角色管理</span>
            </Link>
          </Menu.Item>
          <Menu.Item   icon={<BarsOutlined />} key="7">
            <Link to="/system/menu" >
              <span>菜单管理</span>
            </Link>
          </Menu.Item>
          <Menu.Item  icon={<ClusterOutlined/>} key="8">
          <Link to="/system/dept" >
            部门管理
            </Link>
          </Menu.Item>
          <Menu.Item key="9"  icon={<ContainerOutlined/>} key="9">
          <Link to="/system/post" >
            岗位管理
            </Link>
            </Menu.Item>
          <Menu.Item key="10" icon={<GlobalOutlined />} key="10">
          <Link to="/system/dict"  >
            字典管理
            </Link>
          </Menu.Item>
        </SubMenu>

        <Menu.Item key="3" icon={<UploadOutlined />}>
          系统监控
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

const mapStateToProps = ({ home }) => {
  return {
    home,
  };
};

export default connect(mapStateToProps)(SiderView);
